<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>奎鑫Zeus采销系统</title>
  <link rel="stylesheet" href="../static/font/iconfont.css">
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    li,
    ul {
      list-style: none;
    }
    .login-wrap{
      display:-webkit-box;
      display:-webkit-flex;
      display:-ms-flexbox;
      display:flex;
      -webkit-box-orient:vertical;
      -webkit-flex-direction:column;
      -ms-flex-direction:column;
      flex-direction:column;
      width:100%;
      height:100%;
    }

    .top-nav {
      height: 40px;
      width: 100%;
      flex-grow: 0;
      flex-shrink: 0;
      -webkit-box-flex: 0;
      position:absolute;
      background-color:rgba(0,0,0,0);
      top:0;
      z-index:2;
      color:#ddd;
    }

    .top-nav .tit-contain {
      width: 95%;
      margin: 0 auto;
      font-size: 16px;
      text-align: center;
    }

    .top-nav .tit-contain .line {
      float: left;
      margin: 13px 6px;
      width: 1px;
      height: 14px;
      background-color: #ebecf0;
    }

    .top-nav .tit-contain .maintit {
      float: left;
      height: 40px;
      line-height: 40px;
    }

    .top-nav .tit-contain .subtit {
      float: left;
      font-size: 13px;
      line-height: 41px;
      height: 40px;
    }

    .top-nav .tit-contain::after {
      content: "";
      display: block;
      height: 0;
      clear: both;
      visibility: hidden;
    }

    .main-wrap {
      height: 100%;
      flex-grow: 1;
      flex-shrink: 1;
      -webkit-box-flex: 1;
      width: 100%;
      position: relative;
    }
    .main-wrap .bg{
      background-image: url('../static/img/bg3.jpg');
      background-position:center;
      position: absolute;
      width:100%;
      height:100%;
      filter: blur(3px);
      overflow: hidden;
    }

    .clearfix::after,.clearfix::before{
      content:"";
      display: table;
      clear: both;
    }

    .main-wrap .desc {
      font-size: 30px;
      color: #fff;
      text-shadow: 1px 1px 5px #000;
      position: absolute;
      left: 50%;
      top: 20%;
      transform: translate3d(-50%,-50%,0);
      z-index:2;
    }

    .main-wrap .desc .important {
      color: #fccc00;
      font-size: 34px;
      margin: 0 12px;
    }

    .main-wrap .login-form {
      background-color:rgba(255,255,255,0.8);
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate3d(-50%,-50%,0);
      padding: 40px 30px;
      border-radius: 5px;
      z-index:3;
      box-shadow: 1px 1px 50px #000;
    }

    .main-wrap .login-form .form-tit {
      font-size: 17px;
      color: #fccc00;
      margin-bottom: 15px;
      text-shadow: 1px 1px 0px #444;
    }

    .main-wrap .login-form .input {
      margin: 0 0 20px;
      width: 350px;
      border: 1px solid #eee;
      border-radius: 5px;
      padding-left: 8px;
      padding:15px 10px;
      outline:none;
      font-size:16px;
    }

    input:-webkit-autofill {  
      -webkit-box-shadow: 0 0 0px 1000px white inset;  
      border: 1px solid #eee!important;  
    }  

    .main-wrap .login-form .company {
      width: 370px;
      margin-bottom: 0px;
      border-radius: 5px;
      padding:15px 10px;
      outline:none;
      font-size:16px;
    }

    .login-btn {
      display: block;
      width: 368px;
      line-height: 2.5em;
      margin-top:20px;
      background-color: #fccc00;
      color: #fff;
      text-shadow: 1px 0px 0px #000;
      border-radius: 5px;
      text-align: center;
      text-decoration: none;
      font-size: 18px;
      cursor: pointer;
      border:1px solid #ddd;
    }

    .login-btn:hover {
      background-color: #f1d664
    }
    .warn-txt {
      color: #ff0000;
      font-size: 13px;
      margin-top: 15px;
      padding-left: 2px;
    }

    .contact-wrap{
      height:auto;
      position:absolute;
      bottom:0;
      width: 100%;
      box-sizing: border-box;
      padding:1% 15%;
      background-color:rgba(15,15,15,0.95);
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      color:#ddd;
    }
    .contact-wrap .footer{
      display: flex;
      flex-direction: row;
      align-items: center;
    }
    .contact-wrap .footer .content{
      display: flex;
      flex-direction: column;
      justify-content: center;
    }
    .contact-wrap .footer .content p{
      cursor: pointer;
      font-size:12px;
    }
    .contact-wrap .footer .content p:hover{
      color:#fccc00;
    }
    .contact-wrap .footer .content.title{
      align-items: center;
      font-size:12px;
    }
    .contact-wrap .footer .content + .content{
      margin-left:10px;
    }
    .contact-wrap .footer i.iconfont{
      color:#fccc00;
      font-size:30px;
    }
  </style>
</head>

<body>
  <div class="login-wrap">
    <div class="top-nav">
      <div class="tit-contain clearfix">
        <i></i>
        <span class="maintit">奎鑫</span>
        <i class="line"></i>
        <span class="subtit">采销系统</span>
      </div>
    </div>
    <div class="main-wrap clearfix">
      <div class="bg">

      </div>
      <div class="login-form">
        <ul>
          <li>
            <input type="text" placeholder="用户名" class="input userId">
          </li>
          <li>
            <input type="password" placeholder="密码" class="input password">
          </li>
          <li>
            <select name="" class="input company">
                <option value="">请选择公司</option>
                <option value="00">奎鑫总公司</option>
                <option value="01">南京奎鑫</option>
                <option value="02">武汉奎鑫</option>
                <option value="03">西安奎鑫</option>
                <option value="04">长春奎鑫</option>
                <option value="05">沈阳奎鑫</option>
                <option value="06">山东奎鑫</option>
                <option value="07">南昌奎鑫</option>
                <option value="08">重庆奎鑫</option>
                <option value="09">无锡奎鑫</option>
            </select>
          </li>
          <li class="warn-txt"></li>
          <li>
            <a class="login-btn">登录</a>
          </li>
        </ul>
      </div>
      <p class="desc">做<span class="important">领先的</span>钢铁贸易商</p>
    </div>
    <div class="contact-wrap">
      <div class="footer">
        <div class="content title">
          <i class="iconfont icon-tel"></i>
        </div>
        <div class="content">
          <p>58711629</p>
          <p>58700476</p>
        </div>
        <div class="content">
          <p>58798979</p>
          <p>58700476</p>
        </div>
      </div>
      <div class="footer">
        <div class="content title">
          <i class="iconfont icon-qq"></i>
        </div>
        <div class="content"><p>暂无</p></div>
      </div>
      <div class="footer">
        <div class="content title">
          <i class="iconfont icon-cs"></i>
        </div>
        <div class="content">
          <p><span>服务监督：</span>13390928886</p>
          <p><span>受理时间：</span>8:00-18:00 </p>
        </div>
      </div>
    </div>
  </div>
</body>
<script src="../static/js/jquery-1.9.1.min.js"></script>

</html>
<script>
  (function () {
    $('.login-btn').on('click', function (e) {
      e.preventDefault()
      var params = {
        userId: $('.userId').val(),
        password: $('.password').val(),
        comId: $('.company').val()
      }
      $.ajax({
        url: '/zues/api/user/login',
        data: params,
        contentType: 'application/x-www-form-urlencoded',
        type: 'post',
        success: function (res) {
          if (res.code === 200) {
            document.location.href = 'http://127.0.0.1:8080'
          } else {
            $('.warn-txt').text(res.msg)
          }
        }
      })
    })
    $('.input').focus(function () {
      $('.warn-txt').text('')
    })
})()

</script>